/*
 * 有赞订单搜索
 * @Author: zfx
 * @Date: 2018-07-18 14:22:07
 */
<template>
	<Form
		ref="formInline"
		name="query__form"
		inline
		@keydown.native.enter.prevent="confirmSearch">

		<Form-item
			v-if="Number(getUserInfo.has_youzan) === 1"
			:label-width="isChinese?80:120"
			:label="$t('favorable_order.sync_time_period')">
			<DatePicker
				:placeholder="$t('favorable_order.please_select',{'field':$t('favorable_order.time_period')})"
				name="search-purchase_at"
				type="daterange"
				placement="bottom-start"
				format="yyyy-MM-dd HH:mm:ss"
				style="width: 280px"
				split-panels
				@on-change="changeDate"/>
		</Form-item>

		<Form-item v-if="Number(getUserInfo.has_youzan) === 1">
			<i-col>
				<Button
					name="query__sync"
					type="primary"
					@click="syncSearch">
					{{ $t('favorable_order.sync_youzan_order_list') }}
				</Button>
			</i-col>
		</Form-item>

		<Form-item
			:label-width="60"
			:label="$t('favorable_order.store_id')">
			<Select
				v-model="formValidate.store_id"
				clearable
				filterable
				transfer>
				<Option
					v-for="(item,key) in favorableStores"
					:value="String(item.id)"
					:key="key">{{ item.name }}</Option>
			</Select>

		</Form-item>

		<Form-item
			:label="$t('favorable_order.keyword')"
			:label-width="60">
			<i-input
				v-model="formValidate.keyword"
				:placeholder="$t('favorable_order.please_enter_keyword')"
				:style="isChinese ? 'width: 200px' : 'width: 300px'"
				type="text"/>
		</Form-item>

		<Form-item>
			<Button
				type="primary"
				@click="confirmSearch">
				{{ $t('common.search') }}
			</Button>
		</Form-item>

	</Form>
</template>
<script>

import { mapGetters } from 'vuex';

export default {

	name: 'YouzanOrderSearchForm',

	props: {
		brands: {
			type: Object,
			default() {
				return {};
			},
		},
		favorableStores: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		return {
			formValidate: {
				order_number: '', // 订单编号

				time_range: '', // 同步时间

				keyword: '', // 关键字

				store_id: '', // 店铺名称
			}, // 搜索框的对象参数
		};
	},

	computed: {
		...mapGetters('userToken', [
			'getUserInfo',
		]),

		isChinese() {
			return this.$i18n.locale === 'zh-CN';
		},
	},

	methods: {

		/**
		 * 改变日期之后触发的回调
		 * @param  {Array} date {日期区间}
		 * @return {undefined}
		 */
		changeDate(date) {
			this.formValidate.time_range = date;
		},

		/**
		 * 重置参数
		 * @return {undefined}
		 */
		resetParam() {
			this.$refs.formInline.resetFields();
			this.formValidate.time_range = [];
		},

		/**
		 * 同步有赞时间段
		 * @return {undefined}
		 */
		syncSearch() {
			const [start, end] = this.formValidate.time_range;

			const param = {

				start_created: start,

				end_created: end,

			};

			this.$emit('syncSale', param);
		},

		/**
         * 确认搜索
         * @return {undefined}
         */
		confirmSearch() {
			const param = {

				keyword: this.formValidate.keyword,

				store_id: this.formValidate.store_id,
			};

			this.$emit('search', param);
		},

	},

};

</script>
